<template>
  <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1" ro>首页</el-menu-item>
    <el-menu-item index="2">新闻</el-menu-item>
    <el-menu-item index="3">问答</el-menu-item>
    <el-menu-item index="4">专区</el-menu-item>
    <!--      <el-menu-item style="width: 24em"></el-menu-item>-->

    <el-menu-item>
      <el-input
        placeholder="搜索文章或新闻"
        prefix-icon="el-icon-search"
        v-model="keyword">
      </el-input>
    </el-menu-item>
    <el-menu-item>
      <el-col v-if="viewName=='' || viewName == '游客'">
        <el-button @click="()=>{this.$router.push('/login')}" type="text">登录</el-button>
        <el-button @click="()=>{this.$router.push('/register')}" type="text">注册</el-button>
      </el-col>
      <el-col v-else>
        <el-link>{{ viewName }}</el-link>
        <el-button type="text">注销</el-button>
      </el-col>
    </el-menu-item>
  </el-menu>
</template>
<script>
export default {
  name: 'TopBar',
  data () {
    return {
      activeIndex: '1',
      keyword: '',
      viewName: ''
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    }
  },
  created () {
    this.$axios({
      url: 'info',
      method: 'post',
      headers: {
        satoken: this.$store.state.token
      }
    }).then(resp => {
      this.$store.commit('setUser', resp.data.payload)
      console.log(this.$store.state.user)
      if (this.$store.state.user.nickname !== '') {
        this.viewName = this.$store.state.user.nickname
      } else {
        this.viewName = this.$store.state.user.username
      }
    })
  }
}
</script>
<style scoped>
.nav {
  display: flex;
}

/*.nav *{*/
/*  display: inline-block;*/
/*}*/
.el-menu-item.is-active {
  border-bottom: 2px solid #409EFF;
}
</style>
